<?php

// -----------------------------------------------------------------------------

include "../config/config.php";
include "../auth.php";
include "../DBManager.php";
include "../resources/parsedown-1.7.4/Parsedown.php";

// -----------------------------------------------------------------------------

if (!isset($_GET['id'])) {
    exit("需要传入有效的参数");
}

$id = $_GET['id'];

// -----------------------------------------------------------------------------

$dbPath = "../" . $dbPath; // 不加这行语句的话会报错，提示找不到对应路径
$db = new DBManager("sqlite:" . $dbPath);

$Parsedown = new Parsedown();

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>查看总结与规划</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
    <style>
        /*--------------------------------------------------------------*/

        h1 {
            border-bottom: .1rem solid #dfe2e5;
            padding-bottom: 1rem;
        }

        h2 {
            color: #2F2F2F;
            background: #c9d9de;
            border-left: .2rem solid #647fc4;
            margin: 1rem 0;
            padding: .25rem 0 .25rem 1rem;
        }

        /*--------------------------------------------------------------*/

        img {
            width: auto;
            height: auto;
            max-width: 100%;
            vertical-align: middle;
            display: table-cell;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        /*--------------------------------------------------------------*/

        table, th, td {
            border: 1px solid black;
            padding: 0.75rem;
        }
        thead {
            color: #fff;
            background-color: #343a40;
            border-color: #454d55;
        }

        /*--------------------------------------------------------------*/

        blockquote {
            font-size: 1rem;
            background-color: #EEF0F4;
            border-left: .2rem solid #DDDFE4;
            margin: 1rem 0;
            padding: .25rem 0 .25rem 1rem;
        }

        blockquote p {
            padding-top: 12px;
        }

        a {
            text-decoration-line: none;
        }

        /*--------------------------------------------------------------*/

        div {
            word-break: break-all;
        }

        /*--------------------------------------------------------------*/
    </style>
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="../resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<?php include "../globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<div class="container container-fluid mt-3 mb-5">

    <?php

        if (!$db->summaryAndPlanExist($id)) {
            exit("指定的总结与规划不存在！");
        }

        $data = $db->readFromSummariesAndPlansById($id);
        $title = $data["title"];
        $year = $data["year"];
        $content = $data["content"];
        $editUrl = "edit.php?id=$id";

    ?>

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item"><a class="text-decoration-none" href="index.php">总结与规划</a></li>
                <li class="breadcrumb-item"><a class="text-decoration-none" href="listOfSummariesAndPlans.php?year=<?php echo $year; ?>&sort=sortNumber&sequence=desc">总结与规划 of <?php echo $year; ?></a></li>
                <li class="breadcrumb-item active">查看</li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <?php

    $html = "";
    if (!empty($content)) {
        $html = $Parsedown->text($content);
    }

    echo <<<BBB
        <div class="list-group mb-2">
            <a href="$editUrl" target="_self" class="list-group-item list-group-item-action mb-2">点击编辑(i) - <span class="text-info">{$title}</span></a>
        </div>
    BBB;

    if (empty($html)) {
        echo <<<BBB
            <div>
            <p>暂无内容，请先编辑。</p>
            </div>
        BBB;
    } else {
        echo <<<BBB
            <div id="showTree"></div>
            <div id="content">
                $html
            </div>
        BBB;
    }


    ?>

</div>

<!-- ----------------------------------------------------------------------- -->
<script src="../resources/jQuery/jquery-3.5.1.js"></script>
<!-- ----------------------------------------------------------------------- -->

<!-- 添加「返回顶部按钮」 -->
<script src="../resources/vanilla-back-to-top/index.js"></script>
<script src="../resources/vanilla-back-to-top/config.js"></script>

<!-- ----------------------------------------------------------------------- -->

<!--自动生成文章目录-->
<script src="../resources/autocjs/autoc.js"></script>
<script>
    // 创建 Outline 实例
    let navigation = new AutocJs({
        // 文章正文 DOM 节点的 ID 选择器
        article: '#content',
        // 要收集的标题选择器
        selector: 'h2,h3',
        // 侧边栏导航的标题
        title: '本文目录',
        // 文章导读导航的位置
        // outside - 以侧边栏菜单形式显示（默认值）
        // inside - 在文章正文一开始的地方显示
        position: 'inside',
        // 标题图标链接的 URL 地址
        // （默认）没有设置定制，点击链接页面滚动到标题位置
        // 设置了链接地址，则不会滚动定位
        anchorURL: '',
        // 链接的显示位置
        // front - 在标题最前面（默认值）
        // back - 在标题后面
        anchorAt: 'front',
        // 是否生成文章导读导航
        isGenerateOutline: true,
        // 是否在文章导读导航中显示段落章节编号
        isGenerateOutlineChapterCode: true,
        // 是否在正文的文章标题中显示段落章节编号
        isGenerateHeadingChapterCode: true,
        // 是否在正文的文章标题中创建锚点
        isGenerateHeadingAnchor: true
    });
</script>
<script>
    $(function() {
        // 判断文章目录是否为空
        if($(".outline-inside").find("li").length <= 1)
        {
            // 文章目录为空时隐藏目录
            $(".outline-inside").first().hide()
        } else {
            // 设置目录在指定element中显示
            $(".outline-inside").first().appendTo("#showTree")
        }
    });
</script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 快捷键
    var keyGPressed = 0;
    $(window).keydown(function(event){

        switch (event.key) {

            case "i":
                // 进入编辑
                keyGPressed = 0;
                var url = "<?php echo $editUrl; ?>";
                window.open(url, "_self");
                break
            case "g":
                // 返回顶部
                if (keyGPressed == 1) {
                    $("html, body").animate({ scrollTop: 0});
                    keyGPressed = 0
                } else {
                    keyGPressed = 1
                }
                break
            case "j":
                keyGPressed = 0;
                // 屏幕向下滚动一小段距离
                var y = $(window).scrollTop();
                $('html, body').animate({ scrollTop: y + 650})
                break;
            case "k":
                keyGPressed = 0;
                // 屏幕向上滚动一小段距离
                var y = $(window).scrollTop();
                $('html, body').animate({ scrollTop: y - 650})
                break;
            default:
                keyGPressed = 0;
                break;
        }

        // 滚动到屏幕底部
        if (event.shiftKey) {
            switch (event.key) {
                case 'G':
                    keyGPressed = 0;
                    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
                    break
            }
        }

    })
</script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>
